<template>
	<div class="home">

		<div class="navs">
			<h1>保尔酒庄</h1>
			<router-link to="/homepage" class="left warp aside">
				<img src="../assets/mendian.png" alt="" />
				<span>个人中心</span>
			</router-link>
			<router-link to="/projectmananger" class="left warps aside">
				<img src="../assets/shangpin.png" alt="" />
				<span>商品管理</span>
			</router-link>
			<router-link to="/orders" class="left warps aside">
				<img src="../assets/dingdan.png" alt="" />
				<span>订单管理</span>
			</router-link>
			<router-link to="/staticsproject" class="left warps aside">
				<img src="../assets/xiaoshou.png" alt="" />
				<span>销售管理</span>
			</router-link>
			<router-link to="/setup" class="left warps aside">
				<img src="../assets/yijian.png" alt="" />
				<span>意见反馈</span>
			</router-link>
			<router-link to="/business" class="left warps aside">
				<img src="../assets/pinglun.png" alt="" />
				<span>评论管理</span>
			</router-link>
			<a class="quit"  href="#"  @click="dialogVisible = true">
				<img src="../assets/back.png" style="width: 20px;height: 20px;" alt=""><span style="color: #333;">退出</span>
				</a>
		</div>
		<div class="section">
			<el-header>
				<div class="header_imafgasd">
					<!-- http://localhost:8081/admin/changeAdmin -->
					<el-upload ref="upload" class="avatar-uploader" :action="basurl + 'admin/changeAdmin'"
						:show-file-list="false" :on-success="handleAvatarSuccess"
						:data="myData" 
						:before-upload="beforeAvatarUpload"><!-- :auto-upload="false" -->
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<h4>{{ name }}</h4>
					<!-- <h4 style="margin-left: 20px;" @click="dialogVisible=true">退出</h4> -->
				</div>
			</el-header>
			<router-view></router-view>
		</div>
		<el-dialog title="确定要退出吗？" :visible.sync="dialogVisible" width="30%"  center>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="tuichu">确 定</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			imageUrl: '',
			dialogVisible:false,
			basurl: require('../assets/baseUrl').baseUrl,
			name: "",
			myData: {},
			adminid: 0,
			fild: "",
			flag: false,

		}
	},
	methods: {
		//退出
		tuichu() {
			this.$http.post(this.basurl + "admin/changeLog", {
				adminId: this.adminid,
				logStatus: 0
			}).then(res => {
				/* console.log(res) */
				sessionStorage.clear()
				this.$router.push("/login")
			})
		},
		handleAvatarSuccess(res, file) {
		/* 	console.log(file) */
        	this.imageUrl = URL.createObjectURL(file.raw);
			this.$router.push("/login")
			this.$message.success("更换成功")
			

      },
		beforeAvatarUpload(file) {
			
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		}
		// flags(){
		// 	this.flag=!this.flag
		// 	console.log(this.flag)
		// }
	},
	mounted() {
		this.imageUrl = this.basurl + sessionStorage.getItem("iserIcon")
		this.name = sessionStorage.getItem("adminName")
		this.adminid = Number(sessionStorage.getItem("adminId"))
		this.myData={
				adminId:Number(sessionStorage.getItem("adminId"))
			}
	}
}
</script>
<style lang="less">
* {
	margin: 0;
	padding: 0;
}

.home {
	display: flex;

	.navs {
		width: 15vw;
		height: 100%;
		background: url(../assets/nav.png);
		min-width: 170px;
		.avatar-uploader{
			width: 50px;
			height: 50px;
		line-height: 50px;
		margin: 0 30px ;
		}
		.quit {
		width: 15vw;
		position: absolute;
		bottom: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		img {
			width: 25px;
			height: auto;
			margin-right: 10px;
			line-height: 0px;
	
		}
	}

	}

	

	.header_imafgasd {
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.avatar-uploader {
			width: 50px;
			height: 50px;
			line-height: 50px;
			margin: 0 30px;
		}

		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			border-radius: 100%;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
		}

		.avatar {
			width: 50px;
			height: 50px;
			display: block;
			border-radius: 100%;
		}
	}
}

.home a {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.home .section {
	width: 85vw;
	/* min-width: ; */
	min-width: 1000px;
}

.home .navs h1 {
	text-align: center;
	margin: 15px 0;
}

.home .navs .aside {
	display: flex;
	justify-content: center;
	align-items: center;
}

.home .navs .aside img {
	width: 20px;
	height: auto;
	margin-right: 10px;
}
</style>
